import { createRoot } from "react-dom/client";
import { Flex, Row, Column, Blank, Stack } from '@components/FlexBox';
import { Frame } from "@composites/Frame";
import { Debugger } from "@composites/DevTools";
import { RootViewPort } from "@composites/RootViewport";
import { ShortcutLock } from "@composites/ShortcutLock";

createRoot(document.getElementById('root')!).render(
  <Frame
    features={[RootViewPort,Debugger,ShortcutLock]}
  >
    <Flex>
      <div>Flex Test</div>
      <div>Flex Test</div>
      <div>Flex Test</div>
    </Flex>
    <Row>
      <div>Row Test 1</div>
      <div>Row Test 2</div>
    </Row>
    <Blank>
      <div>Blank Test</div>
    </Blank>
    <Stack style={{
      width:"300px",
      height:"200px"
    }}>
      <div>Top Layer</div>
      <div>Bottom Layer</div>
    </Stack>
    <Column>
      <div>Column Test 1</div>
      <div>Column Test 2</div>
    </Column>
  </Frame>
);